<!DOCTYPE html><html><head><title>欢迎使用autoHeader插件</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style></style></head><body><div id='preview-contents' class='note-content'>
                        <div id="wmd-preview" class="preview-content"></div>
                    <div id="wmd-preview-section-1" class="wmd-preview-section preview-content">

</div><div id="wmd-preview-section-1278" class="wmd-preview-section preview-content">

<h2 id="欢迎使用autoheader插件">欢迎使用autoHeader插件</h2>

<hr>

<p><strong>autoHeader</strong>插件基于jquery开发，目前包含的功能有： </p>

<ol><li rel="1">自动书写复杂多层表头以及表格数据  </li>
<li rel="2">在界面中，基于表头进行数据的筛选</li>
<li rel="3">对合计值、平均值、最大值、最小值进行附加显示以及比对（比对不包括合计值）  </li>
<li rel="4">对结果集进行排序</li>
<li rel="5">行序列号（支持正序、倒序）</li>
<li rel="6">与预设值进行比较以及统计展示</li>
</ol>

<p>插件的特性包含：  </p>

<ol><li rel="1"><strong>css无关性</strong>：使用者可使用自定义的任何css来定义生成的内容外观  </li>
<li rel="2"><strong>前后端分离性</strong>：后端只需传送json格式数据（或者key：value格式的object对象）作为入参即可完成前端的一系列功能。  </li>
<li rel="3"><strong>插件通用的易集成性</strong>：与zTree树插件，HighCharts报表插件，tablesorter，bootstrap均能进行很好的集成使用，你可以在demo中看到相应的例子。</li>
</ol></div><div id="wmd-preview-section-3" class="wmd-preview-section preview-content">

<h3 id="当前版本v11">当前版本：V1.1</h3>

<hr>

</div><div id="wmd-preview-section-32209" class="wmd-preview-section preview-content">

<h2 id="浏览器支持">浏览器支持</h2>

<p><strong>IE（9+）</strong> <br>
<strong>Firefox（最新）</strong> <br>
<strong>Chrome（最新）</strong> <br>
<strong>Opera（最新）</strong> </p>

<hr>

</div><div id="wmd-preview-section-34843" class="wmd-preview-section preview-content">

<h2 id="文件夹说明">文件夹说明</h2>

<ul><li><code>src</code>：包括插件用到的各种资源和插件本身</li>
<li><code>example</code>：插件使用的具体例子，展示使用bootstrap。base：基础使用，extend：和其他插件的集成使用。</li>
</ul>

<p><strong>导航栏</strong></p>

<div><div class="toc"><div class="toc">
<ul>
<li><ul>
<li><a href="#欢迎使用autoheader插件">欢迎使用autoHeader插件</a><ul>
<li><a href="#当前版本v11">当前版本：V1.1</a></li>
</ul>
</li>
<li><a href="#浏览器支持">浏览器支持</a></li>
<li><a href="#文件夹说明">文件夹说明</a></li>
<li><a href="#使用方法">使用方法</a><ul>
<li><a href="#插件的引入">插件的引入</a></li>
<li><a href="#插件的使用">插件的使用</a><ul>
<li><a href="#1-自动书写表头和数据功能">1. 自动书写表头和数据功能</a></li>
<li><a href="#最简单的调用">最简单的调用</a></li>
<li><a href="#扩展调用">扩展调用</a><ul>
<li><a href="#自定义表头树属性名">自定义表头树属性名</a></li>
<li><a href="#表头树排序功能">表头树排序功能</a></li>
<li><a href="#css自定义功能">css自定义功能</a></li>
<li><a href="#表头格式指定功能">表头格式指定功能</a></li>
<li><a href="#表头描述功能">表头描述功能</a></li>
<li><a href="#debug性能测试模式">debug性能测试模式</a></li>
</ul>
</li>
<li><a href="#2-基于表头的数据筛选功能">2. 基于表头的数据筛选功能</a></li>
<li><a href="#3-统计以及比对功能">3. 统计以及比对功能</a></li>
<li><a href="#合计值">合计值</a><ul>
<li><a href="#合计值统计">合计值统计</a></li>
</ul>
</li>
<li><a href="#平均值">平均值</a><ul>
<li><a href="#平均值统计">平均值统计</a></li>
<li><a href="#平均值比对">平均值比对</a></li>
</ul>
</li>
<li><a href="#最大值">最大值</a><ul>
<li><a href="#最大值统计">最大值统计</a></li>
<li><a href="#最大值比对">最大值比对</a></li>
</ul>
</li>
<li><a href="#最小值">最小值</a><ul>
<li><a href="#最小值统计">最小值统计</a></li>
<li><a href="#最小值比对">最小值比对</a></li>
</ul>
</li>
<li><a href="#4-排序功能">4. 排序功能</a></li>
<li><a href="#5-行序列号功能">5. 行序列号功能</a></li>
<li><a href="#6-预设值比对功能">6. 预设值比对功能</a><ul>
<li><a href="#比对数值对象">比对数值对象</a></li>
<li><a href="#比对公式">比对公式</a></li>
<li><a href="#比对公式的默认配置">比对公式的默认配置</a></li>
<li><a href="#比对公式示例">比对公式示例</a></li>
<li><a href="#比对的使用">比对的使用</a></li>
<li><a href="#比对的描述配置">比对的描述配置</a></li>
<li><a href="#比对的统计">比对的统计</a></li>
</ul>
</li>
<li><a href="#通用功能">通用功能</a><ul>
<li><a href="#表格的css配置">表格的css配置</a></li>
<li><a href="#比对标签css配置">比对标签css配置</a></li>
<li><a href="#返回类型配置">返回类型配置</a></li>
<li><a href="#小数保留位数配置">小数保留位数配置</a></li>
<li><a href="#自定义抬头描述配置功能">自定义抬头描述配置功能</a></li>
<li><a href="#书写位置的配置">书写位置的配置</a></li>
<li><a href="#统计值css自定义功能">统计值css自定义功能</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#参数说明">参数说明</a><ul>
<li><a href="#书写部分">书写部分</a></li>
<li><a href="#统计分析部分">统计分析部分</a></li>
</ul>
</li>
<li><a href="#license">License</a></li>
<li><a href="#更新日志">更新日志</a><ul>
<li><a href="#v11">V1.1</a></li>
<li><a href="#v10">V1.0</a></li>
</ul>
</li>
<li><a href="#展望功能">展望功能</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

<hr></div><div id="wmd-preview-section-5" class="wmd-preview-section preview-content">

<h2 id="使用方法">使用方法</h2>

</div><div id="wmd-preview-section-6" class="wmd-preview-section preview-content">

<h3 id="插件的引入">插件的引入</h3>

<p>在页面中引入jquery文件以及本插件（jquery版本要求在1.6以上，1.6以下的版本无法支持prop属性）  </p>

<p><code>&lt;script src="../../src/js/jquery.min.js"&gt;&lt;/script&gt; <br>
&lt;script src="../../src/js/jquery.autoHeader.all.js"&gt;&lt;/script&gt;</code></p>

<p>如果需要使用插件自带的css，请复制css目录下的style.css文件以及autoHimg图片文件夹到项目路径下，并且在页面中引入css文件： <br>
<code>&lt;link rel="stylesheet" type="text/css" href="../../src/css/style.css"&gt;</code> </p>

<p>(请分别更改为你项目中的实际地址） <br>
(插件提供了压缩版本，建议将jquery.autoHeader.all.js更换为jquery.autoHeader.min.js） </p>

<hr>

</div><div id="wmd-preview-section-7" class="wmd-preview-section preview-content">

<h3 id="插件的使用">插件的使用</h3>

</div><div id="wmd-preview-section-8" class="wmd-preview-section preview-content">

<h4 id="1-自动书写表头和数据功能">1. 自动书写表头和数据功能</h4>

</div><div id="wmd-preview-section-9" class="wmd-preview-section preview-content">

<h4 id="最简单的调用">最简单的调用</h4>

<p>html：在你认定的位置，放置用于显示表头和数据的table <br>
<code>&lt;table id="tabled" &gt;&lt;/table&gt;</code>  </p>

<p>js：在代码中，传入必要入参，执行init函数即可  </p>

<pre class="prettyprint hljs-dark"><code class="hljs elixir">   <span class="hljs-variable">$.</span><span class="hljs-keyword">fn</span>.autoHeader.init({<br>   <span class="hljs-symbol">laynum:</span><span class="hljs-number">5</span>,<br>   <span class="hljs-symbol">startlay:</span><span class="hljs-number">1</span>,<br>   <span class="hljs-symbol">headJson:</span>headstr,<br>   <span class="hljs-symbol">dataJson:</span>bodystr,<br>   <span class="hljs-symbol">tableid:</span><span class="hljs-string">'tabled'</span>});<br></code></pre>

<p><em>参数说明：</em></p>

<blockquote>
  <p><strong>laynum</strong>：表头层数，插件默认为1，超过1层则需要自己设置 <br>
  <strong>startlay</strong>:数据从哪层开始计入表头，默认为1 <br>
  <strong>headJson</strong>：表头树的json数据（数据格式在下方说明）（key：value格式的object数据亦可，但是推荐使用json格式数据，之后不再进行说明） <br>
  <strong>dataJson</strong>：表格数据的json数据 <br>
  <strong>tableid</strong>：放置表头和数据的表格id  </p>
</blockquote>

<p><em>headJson表头树数据结构说明：</em> <strong>（首次使用必看）</strong></p>

<ol><li rel="1">json数据中，必须包含层级、树形编号、是否叶子节点、表头节点名称、对应数据字段名这五个属性，可选属性有表头字段描述内容、字段css样式两个属性。</li>
<li rel="2">这些属性对应的默认属性名为：层级（level）、树形编号（treeCode）、是否叶子节点（isleaf）、表头节点名称（name）、对应数据字段名（reportColumnName）以及表头字段描述内容（headDesc）、字段css样式（cssstyle）。</li>
<li rel="3">属性名可根据实际情况更改，插件以入参形式提供了属性名更改的方式。具体操作方法可看<strong>扩展调用</strong>介绍说明。  </li>
<li rel="4">表头树的书写顺序默认按照headJson的顺序正序书写。插件同时也提供了<strong>排序功能</strong>，按照表头树形编码从小到大进行排序，可按需开启，使用方法查阅<strong>扩展调用</strong>对应说明。</li>
</ol>

<p><em>表头样例数据解析说明：</em> <strong>（首次使用必看）</strong> <br>
一段表头样例数据：</p>

<pre class="prettyprint hljs-dark"><code class="hljs json">[{"<span class="hljs-attribute">cssstyle</span>":<span class="hljs-value"><span class="hljs-string">"width:80px;height:50px;"</span></span>,"<span class="hljs-attribute">headDesc</span>":<span class="hljs-value"><span class="hljs-string">"表头描述"</span></span>,"<span class="hljs-attribute">isleaf</span>":<span class="hljs-value"><span class="hljs-string">"Y"</span></span>,"<span class="hljs-attribute">level</span>":<span class="hljs-value"><span class="hljs-string">"1"</span></span>,"<span class="hljs-attribute">name</span>":<span class="hljs-value"><span class="hljs-string">"表头名称"</span></span>,"<span class="hljs-attribute">reportColumnName</span>":<span class="hljs-value"><span class="hljs-string">"column1"</span></span>,"<span class="hljs-attribute">treeCode</span>":<span class="hljs-value"><span class="hljs-string">"1010"</span></span>}]<br></code></pre>

<p>其中：</p>

<blockquote>
  <ol><li rel="1"><strong>level</strong>：注明该表头节点的层级（从上至下），插件会综合startlay和level对表头数据进行筛选，比startlay数值小的数据不会写入到表头之中。</li>
  <li rel="2"><strong>isleaf</strong>：注明该节点是否为叶子节点，即直接与数据接触的节点，也就是最底层的表头。本属性值为‘Y’的数据将会被认定为是叶子节点。（在任何层级的节点均可成为叶子节点，插件会进行跨行展示）。</li>
  <li rel="3"><strong>name</strong>：表头节点名称，显示在表头单元格里的节点名称。</li>
  <li rel="4"><strong>treeCode</strong>：表头树形编码，该编码是插件的<strong>核心解析</strong>部分，插件根据编码进行上下级关系的解析。子表头的编码必须包含父表头的全部编码，每个表头的编码不可重复。例如中国编码为86，中国北京为8601，中国上海为8602，中国北京海淀区为860109，中国上海静安区为860203。以此类推，对编码大小和位数不做限制，符合树形编码规范即可。</li>
  <li rel="5"><strong>reportColumnName</strong>：对应数据json的属性名，与dataJson相关，叶子节点的表头需要书写该属性，其他则不需要。插件会根据属性名将数据和表头进行对应书写。</li>
  <li rel="6"><strong>headDesc</strong>：表头描述，选填字段，如果开启表头描述功能，则表头描述的内容会取此属性的值。</li>
  <li rel="7"><strong>cssstyle</strong>：表头自定义css样式，选填字段，<strong>开启表头格式指定</strong>并且该属性有值的话，表头的style属性会对应添加指定的css内容值。（某些特定的表头需要指定格式的情况之下考虑使用这个功能，普遍情况下推荐使用css文件）</li>
  </ol>
</blockquote>

<p><em>dataJson表格数据入参说明：</em> <strong>（首次使用必看）</strong> <br>
表格数据的属性名只需和表头树里的<strong>reportColumnName</strong>（该属性名可被更改）属性名对应即可。例表头树里的reportColumnName值为column1，表格数据json里需要有属性名为column1的值，表头对应列下才会有值。</p>

</div><div id="wmd-preview-section-10" class="wmd-preview-section preview-content">

<h4 id="扩展调用">扩展调用</h4>

</div><div id="wmd-preview-section-11" class="wmd-preview-section preview-content">

<h5 id="自定义表头树属性名">自定义表头树属性名</h5>

<p>插件提供了columConfig这个二级入参，用于自定义表头树的属性名。该入参包含的内容如下：  </p>

<pre class="prettyprint hljs-dark"><code class="hljs xquery">columConfig = {<br>            <span class="hljs-string">'treecode'</span>: <span class="hljs-string">'treeCode'</span>, <br>            <span class="hljs-string">'level'</span>: <span class="hljs-string">'level'</span>,<br>            <span class="hljs-string">'isleaf'</span>: <span class="hljs-string">'isleaf'</span>,<br>            <span class="hljs-string">'showname'</span>: <span class="hljs-string">'name'</span>,<br>            <span class="hljs-string">'desc'</span>: <span class="hljs-string">'headDesc'</span>,<br>            <span class="hljs-string">'datacolumn'</span>:<span class="hljs-string">'reportColumnName'</span>,<br>            <span class="hljs-string">'thstyle'</span>: <span class="hljs-string">'cssstyle'</span><br>        }<br></code></pre>

<p>如果表头数据里的属性名和默认的并不相同，那么便可以通过这个入参进行更改。例如层级属性名称为lvl，表头节点名称属性为viewname。那么，在调用init方法的时候传入<strong>columConfig</strong>入参即可进行修改：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">$.fn.autoHeader.init({<br><span class="hljs-string">laynum:</span><span class="hljs-number">5</span>,<br><span class="hljs-string">startlay:</span><span class="hljs-number">1</span>,<br><span class="hljs-string">headJson:</span>headstr,<br><span class="hljs-string">dataJson:</span>bodystr,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">columConfig:</span>{<br><span class="hljs-string">level:</span><span class="hljs-string">'lvl'</span>,<br><span class="hljs-string">showname:</span><span class="hljs-string">'viewname'</span><br>}});<br></code></pre>

<p>如需提高独立性，亦可将columConfig单独定义，之后进行传参（之后的代码举例说明将采取此方法，提高可阅读性）：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">var columConf={<br><span class="hljs-string">level:</span><span class="hljs-string">'lvl'</span>,<br><span class="hljs-string">showname:</span><span class="hljs-string">'viewname'</span><br>}<br>$.fn.autoHeader.init({<br><span class="hljs-string">laynum:</span><span class="hljs-number">5</span>,<br><span class="hljs-string">startlay:</span><span class="hljs-number">1</span>,<br><span class="hljs-string">headJson:</span>headstr,<br><span class="hljs-string">dataJson:</span>bodystr,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">columConfig:</span>columConf<br>});<br></code></pre>

<p>其他属性名的修改也与此相同，不再赘述，需要注意的是，表头树json里的属性名需要和自定义的属性名对应上</p>

</div><div id="wmd-preview-section-12" class="wmd-preview-section preview-content">

<h5 id="表头树排序功能">表头树排序功能</h5>

<p>插件默认按照headJson的顺序正序书写，从上至下，从左到右。插件也提供了按照树形编码的排序功能，每个层级单独排序，默认按照编码从小到大进行排列。<strong>即编码最小的，排在最左边</strong>。</p>

<p>如果需要启用这个功能，只需将一级入参<strong>needsort</strong>设置为true即可。</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">$.fn.autoHeader.init({<br><span class="hljs-string">laynum:</span><span class="hljs-number">5</span>,<br><span class="hljs-string">startlay:</span><span class="hljs-number">1</span>,<br><span class="hljs-string">headJson:</span>headstr,<br><span class="hljs-string">dataJson:</span>bodystr,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">needsort:</span><span class="hljs-literal">true</span><br>});<br></code></pre>

</div><div id="wmd-preview-section-13" class="wmd-preview-section preview-content">

<h5 id="css自定义功能">css自定义功能</h5>

<p>css自定义功能有两种方法，一种是直接在css内容中定义插件所使用的table等容器的格式，例如直接指定#tabled这个元素的css与下属元素的css内容：</p>

<pre class="prettyprint hljs-dark"><code class="hljs css"><span class="hljs-id">#tabled</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value">center</span></span>;}</span><br><span class="hljs-id">#tabled</span> <span class="hljs-tag">caption</span><span class="hljs-rules">{}</span><br><span class="hljs-id">#tabled</span> <span class="hljs-tag">th</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">5px</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value">center</span></span>; <span class="hljs-rule"><span class="hljs-attribute">word-break</span>:<span class="hljs-value"> normal</span></span>;}</span><br><span class="hljs-id">#tabled</span> <span class="hljs-tag">td</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">5px</span> <span class="hljs-number">50px</span> <span class="hljs-number">5px</span> <span class="hljs-number">50px</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value">center</span></span>;<span class="hljs-rule"><span class="hljs-attribute">white-space</span>:<span class="hljs-value">nowrap</span></span>;}</span><br></code></pre>

<p>另一种是使用插件的二级入参：<strong>cssConfig</strong> <br>
下方为二级入参的具体定义以及参数含义</p>

<pre class="prettyprint hljs-dark"><code class="hljs coffeescript">   cssConfig = {<br>                <span class="hljs-string">'table'</span>: <span class="hljs-string">''</span>, <span class="hljs-regexp">//</span>表格的<span class="hljs-class"><span class="hljs-keyword">class</span>属性</span><br>                <span class="hljs-string">'caption'</span>:<span class="hljs-string">''</span>, <span class="hljs-regexp">//</span>表格标题的<span class="hljs-class"><span class="hljs-keyword">class</span>属性</span><br>                <span class="hljs-string">'tr'</span>: <span class="hljs-string">''</span>, <span class="hljs-regexp">//</span>表头tr的<span class="hljs-class"><span class="hljs-keyword">class</span>属性</span><br>                <span class="hljs-string">'th'</span>: <span class="hljs-string">''</span>,<span class="hljs-regexp">//</span>表头th的<span class="hljs-class"><span class="hljs-keyword">class</span>属性</span><br>                <span class="hljs-string">'datatr'</span>:<span class="hljs-string">''</span>,<span class="hljs-regexp">//</span>数据行tr的<span class="hljs-class"><span class="hljs-keyword">class</span>属性</span><br>                <span class="hljs-string">'td'</span>: <span class="hljs-string">''</span><span class="hljs-regexp">//</span>数据行td的<span class="hljs-class"><span class="hljs-keyword">class</span>属性</span><br>            }<br></code></pre>

<p>指定参数并且在init方法中传参之后，插件将会把指定的class属性赋值给对应的表格元素。</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">var cssconfig={<br><span class="hljs-string">table:</span><span class="hljs-string">'tablecss'</span>,<br><span class="hljs-string">tr:</span><span class="hljs-string">'trcss'</span><br>}<br>$.fn.autoHeader.init({<br><span class="hljs-string">laynum:</span><span class="hljs-number">5</span>,<br><span class="hljs-string">startlay:</span><span class="hljs-number">1</span>,<br><span class="hljs-string">headJson:</span>headstr,<br><span class="hljs-string">dataJson:</span>bodystr,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">cssConfig:</span>cssconfig<br>});<br></code></pre>

</div><div id="wmd-preview-section-14" class="wmd-preview-section preview-content">

<h5 id="表头格式指定功能">表头格式指定功能</h5>

<p>如果某些表头需要特定的style格式，那么就可以开启该功能，并且在对应的表头节点数据里将style格式添加到cssstyle属性里（该属性名可修改，详情参见<strong>自定义表头树属性名</strong>）。 <br>
该功能的开启只需指定一级入参thstyle为true即可。</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">$.fn.autoHeader.init({<br><span class="hljs-string">laynum:</span><span class="hljs-number">5</span>,<br><span class="hljs-string">startlay:</span><span class="hljs-number">1</span>,<br><span class="hljs-string">headJson:</span>headstr,<br><span class="hljs-string">dataJson:</span>bodystr,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">thstyle:</span><span class="hljs-literal">true</span><br>});<br></code></pre>

</div><div id="wmd-preview-section-15" class="wmd-preview-section preview-content">

<h5 id="表头描述功能">表头描述功能</h5>

<p>该功能用于有表头描述需要的场景，该功能以二级入参descConfig进行开启和配置。 <br>
下方为二级入参descConfig的定义、默认值以及参数含义</p>

<pre class="prettyprint hljs-dark"><code class="hljs actionscript">descConfig = {<br>                <span class="hljs-string">'enable'</span>:<span class="hljs-literal">false</span>,<span class="hljs-comment">//开启状态：默认为关闭</span><br>                <span class="hljs-string">'desc_type'</span>:<span class="hljs-string">'div'</span>,<span class="hljs-comment">//显示方式：可选方式有div、title。div在div处显示，title则会在th内容外包一层span，span的title置为描述值。默认为div</span><br>                <span class="hljs-string">'d_target_id'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//描述信息展示的容器：默认为空，即插件自动生成描述div。如指定描述的容器id，会将信息放入描述容器中.</span><br>                <span class="hljs-comment">//插件默认的容器，为里外两个div，可重新指定里外div的css格式</span><br>                <span class="hljs-string">'css_out'</span>: <span class="hljs-string">'descdivdefault_out'</span>,<span class="hljs-comment">//外侧div的css</span><br>                <span class="hljs-string">'css_in'</span>: <span class="hljs-string">'descdivdefault_in'</span>,<span class="hljs-comment">//里侧div的css</span><br>                <span class="hljs-string">'css_title'</span>: <span class="hljs-string">'ttitle'</span>,<span class="hljs-comment">//描述的标题css</span><br>                <span class="hljs-string">'css_content'</span>: <span class="hljs-string">'content'</span>,<span class="hljs-comment">//描述的内容css</span><br>                <span class="hljs-string">'css_close'</span>: <span class="hljs-string">'close'</span>,<span class="hljs-comment">//关闭按钮的css</span><br>                <span class="hljs-string">'showevent'</span>:<span class="hljs-string">'click'</span>,<span class="hljs-comment">//弹出描述的事件</span><br>                <span class="hljs-string">'hideevent'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//关闭描述的事件</span><br>                <span class="hljs-string">'position'</span>:<span class="hljs-string">'fly'</span>,<span class="hljs-comment">//div显示位置 有absolute和fly两种状态 absolute：div的位置是绝对值，以x和y作为起点。fly：div的位置以鼠标作为起点，x和y为偏移量</span><br>                <span class="hljs-string">'pos_x'</span>:<span class="hljs-number">10</span>,<span class="hljs-comment">//x位置</span><br>                <span class="hljs-string">'pos_y'</span>:<span class="hljs-number">10</span>,<span class="hljs-comment">//y位置</span><br>                <span class="hljs-string">'desc_th_class'</span>:<span class="hljs-string">''</span> <span class="hljs-comment">//包含描述的表头th的class，如果有值，表头内容包含描述时，class属性将会由这个值覆盖。仅显示方式为div时有效</span><br>            }<br></code></pre>

<p>插件自带了一个半透明的div描述框来进行描述信息的展示，最简单的调用方式如下：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">var descConfig={<br><span class="hljs-string">enable:</span><span class="hljs-literal">true</span><br>}<br>$.fn.autoHeader.init({<br><span class="hljs-string">laynum:</span><span class="hljs-number">5</span>,<br><span class="hljs-string">startlay:</span><span class="hljs-number">1</span>,<br><span class="hljs-string">headJson:</span>headstr,<br><span class="hljs-string">dataJson:</span>bodystr,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">descConfig:</span>descConfig<br>});<br></code></pre>

<p>插件会使用默认的半透明的div描述框来进行信息展示，单击事件触发描述框的显示。  </p>

<p>如果需要使用title的方式来展示描述，那么只需这样定义descConfig：</p>

<pre class="prettyprint hljs-dark"><code class="hljs bash">var descConfig={<br><span class="hljs-built_in">enable</span>:<span class="hljs-literal">true</span>,<br>desc_<span class="hljs-built_in">type</span>:<span class="hljs-string">'title'</span><br>}<br></code></pre>

<blockquote>
  <p>具体调用方法不再赘述</p>
</blockquote>

<p>如果需要将描述信息展示到自定义的容器中（div，span等均可），那么只需指定d_target_id即可：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">var descConfig={<br><span class="hljs-string">enable:</span><span class="hljs-literal">true</span>,<br><span class="hljs-string">d_target_id:</span><span class="hljs-string">'tagrgetid'</span><br>}<br></code></pre>

<blockquote>
  <p>tagrgetid为容器的id属性</p>
</blockquote>

<p>如果需要更改插件自带描述div的css属性，下列入参可供指定挑选（可单独指定）：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">var descConfig={<br><span class="hljs-string">enable:</span><span class="hljs-literal">true</span>,<br><span class="hljs-string">css_out:</span> <span class="hljs-string">'your_out_css'</span>,<span class="hljs-comment">//外侧div的css</span><br><span class="hljs-string">css_in:</span> <span class="hljs-string">'your_in_css'</span>,<span class="hljs-comment">//里侧div的css</span><br><span class="hljs-string">css_title:</span> <span class="hljs-string">'your_title_css'</span>,<span class="hljs-comment">//描述的标题css</span><br><span class="hljs-string">css_content:</span> <span class="hljs-string">'your_content_css'</span>,<span class="hljs-comment">//描述的内容css</span><br><span class="hljs-string">css_close:</span> <span class="hljs-string">'your_close_css'</span><span class="hljs-comment">//关闭按钮的css</span><br>}<br></code></pre>

<blockquote>
  <p>插件自带的描述div的css可以在demo里找到，是半透明效果的显示</p>
  
  <pre class="prettyprint hljs-dark"><code class="hljs css"><span class="hljs-class">.descdivdefault_out</span><span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> auto <span class="hljs-important">!important</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">300px</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">min-height</span>:<span class="hljs-value"><span class="hljs-number">300px</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">10px</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value">absolute</span></span>;<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value">none</span></span></span>}<br>  <span class="hljs-class">.descdivdefault_in</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value">    <span class="hljs-hexcolor">#d8f8c5</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">100%</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">overflow</span>:<span class="hljs-value">auto</span></span>;<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"><span class="hljs-number">300px</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value">absolute</span></span>;<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"><span class="hljs-hexcolor">#3b3b3b</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">5px</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">filter</span>:<span class="hljs-value"><span class="hljs-function">alpha</span>(Opacity=<span class="hljs-number">60</span>)</span></span>;<span class="hljs-rule"><span class="hljs-attribute">-moz-opacity</span>:<span class="hljs-value"><span class="hljs-number">0.95</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">opacity</span>:<span class="hljs-value"> <span class="hljs-number">0.95</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value">absolute</span></span></span>}<br>  <span class="hljs-class">.descdivdefault_in</span> <span class="hljs-class">.close</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value">right</span></span>;<span class="hljs-rule"><span class="hljs-attribute">cursor</span>:<span class="hljs-value">pointer</span></span>; <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"><span class="hljs-hexcolor">#fff</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"><span class="hljs-number">0px</span></span></span>;}</span><br>  <span class="hljs-class">.descdivdefault_in</span> <span class="hljs-class">.content</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">10px</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">text-indent</span>:<span class="hljs-value"><span class="hljs-number">2em</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"><span class="hljs-number">1.5</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"><span class="hljs-number">1em</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"><span class="hljs-number">12px</span></span></span>;}</span><br>  <span class="hljs-class">.descdivdefault_in</span> <span class="hljs-class">.ttitle</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">30px</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"><span class="hljs-hexcolor">#6fce37</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"><span class="hljs-hexcolor">#fff</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"><span class="hljs-number">30px</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">0</span> <span class="hljs-number">10px</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"><span class="hljs-number">14px</span></span></span>;}</span><br></code></pre>
</blockquote>

<p>如果需要更改描述框出现和消失的事件，指定对应的showevent和hideevent参数即可（可单独指定）：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">var descConfig={<br><span class="hljs-string">enable:</span><span class="hljs-literal">true</span>,<br><span class="hljs-string">showevent:</span><span class="hljs-string">'click'</span>,<span class="hljs-comment">//弹出描述的事件</span><br><span class="hljs-string">hideevent:</span><span class="hljs-string">'mouseout'</span><span class="hljs-comment">//关闭描述的事件</span><br>}<br></code></pre>

<blockquote>
  <p>事件均绑定在th元素中</p>
</blockquote>

<p>如需更改描述框的显示方式和显示位置，那么可以使用下列入参：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">var descConfig={<br><span class="hljs-string">enable:</span><span class="hljs-literal">true</span>,<br><span class="hljs-string">position:</span><span class="hljs-string">'fly'</span>,<span class="hljs-comment">//div显示位置 有absolute和fly两种状态 absolute：div的位置是绝对值，以x和y作为起点。fly：div的位置以鼠标作为起点，x和y为偏移量</span><br><span class="hljs-string">pos_x:</span><span class="hljs-number">10</span>,<span class="hljs-comment">//x位置</span><br><span class="hljs-string">pos_y:</span><span class="hljs-number">10</span><span class="hljs-comment">//y位置</span><br>}<br></code></pre>

<p>如果需要将有描述的表头元素和没有描述的表头元素区分开来，那么可以使用desc_th_class参数，该参数指定之后，有描述的表头节点的class将会被置为desc_th_class指定的内容：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">var descConfig={<br><span class="hljs-string">enable:</span><span class="hljs-literal">true</span>,<br><span class="hljs-string">desc_th_class:</span><span class="hljs-string">'got_desc'</span><br>}<br></code></pre>

<blockquote>
  <p>该功能仅显示方式为div时有效</p>
</blockquote>

</div><div id="wmd-preview-section-16" class="wmd-preview-section preview-content">

<h5 id="debug性能测试模式">debug性能测试模式</h5>

<p>该功能可用于测试插件的页面数据填充速度（页面填充速度与计算机配置以及浏览器性能有关），该功能有三个相关一级参数：</p>

<pre class="prettyprint hljs-dark"><code class="hljs actionscript"><span class="hljs-string">'debug'</span>:<span class="hljs-literal">false</span>,<span class="hljs-comment">//debug模式 会输出数据生成等信息值</span><br><span class="hljs-string">'outspanid'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//debug输出模式下输出信息的元素 id 信息会书写到这个元素中。一般是span</span><br><span class="hljs-string">'datamulti'</span>:<span class="hljs-number">0</span>,<span class="hljs-comment">//测试书写性能的数据，如果开启了debug模式，数据包将会进行翻倍书写，倍数为此值</span><br></code></pre>

<p>使用方法类似其他功能：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">$.fn.autoHeader.init({<br><span class="hljs-string">laynum:</span><span class="hljs-number">5</span>,<br><span class="hljs-string">startlay:</span><span class="hljs-number">1</span>,<br><span class="hljs-string">headJson:</span>headstr,<br><span class="hljs-string">dataJson:</span>bodystr,<br><span class="hljs-string">tableid:</span>tabled,<br><span class="hljs-string">datamulti:</span><span class="hljs-number">30</span>,<br><span class="hljs-string">debug:</span><span class="hljs-literal">true</span>,<br><span class="hljs-string">outspanid:</span><span class="hljs-string">'datev'</span><br>});<br></code></pre>

<blockquote>
  <p>开启debug模式，数据循环30倍书写，并且最后将耗时信息输出到id为datev的元素下。  </p>
</blockquote>

<hr>

</div><div id="wmd-preview-section-17" class="wmd-preview-section preview-content">

<h4 id="2-基于表头的数据筛选功能">2. 基于表头的数据筛选功能</h4>

<p>严格来说，这并不能算是插件的自带功能，因为它的调用接口和生成的接口一样，都是init方法，你只需要重新传入一段过滤之后的headJson即可实现类似页面查询过滤的功能，dataJson的过滤也是同理。可以在demo中看到具体实现方法。</p>

<pre class="prettyprint hljs-dark"><code class="hljs avrasm">$.fn.autoHeader.init({<br><span class="hljs-label">laynum:</span><span class="hljs-number">5</span>,<br><span class="hljs-label">startlay:</span><span class="hljs-number">1</span>,<br><span class="hljs-label">headJson:</span>newheadstr,<br><span class="hljs-label">dataJson:</span>newbodystr,<br><span class="hljs-label">tableid:</span>tabled<br>})<span class="hljs-comment">;</span><br></code></pre>

<blockquote>
  <p>为什么将这个功能独立起来，因为基于表头的类似excel的勾选功能在插件的设计内容中，该功能可提高用户的感知度和使用流畅感，遗憾的是该功能目前仍处于建设阶段。</p>
</blockquote>

<hr>

</div><div id="wmd-preview-section-18" class="wmd-preview-section preview-content">

<h4 id="3-统计以及比对功能">3. 统计以及比对功能</h4>

<p>目前包括合计值、平均值、最大值、最小值的显示以及平均值、最大值、最小值与数据行的比对。 <br>
该功能使用anaLyz方法进行调用，调用方式如下：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">$.fn.autoHeader.anaLyz({<br><span class="hljs-string">baseJson:</span>bodyjson,<br><span class="hljs-string">anatype:</span><span class="hljs-string">'avg'</span>,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">digit:</span><span class="hljs-number">2</span>});<br></code></pre>

<p>具有两个二级参数，一个一级参数，可在参数说明中具体查看。</p>

<blockquote>
  <p>统计分析功能针对不同类型的通用性很高，入参具体通用配置将会放在类型之后进行说明。</p>
</blockquote>

</div><div id="wmd-preview-section-19" class="wmd-preview-section preview-content">

<h4 id="合计值">合计值</h4>

</div><div id="wmd-preview-section-3693" class="wmd-preview-section preview-content">

<h5 id="合计值统计">合计值统计</h5>

<p>调用anaLyz方法，注明anatype值为all即可。</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">$.fn.autoHeader.anaLyz({<br><span class="hljs-string">baseJson:</span>bodyjson,<br><span class="hljs-string">anatype:</span><span class="hljs-string">'all'</span>,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">digit:</span><span class="hljs-number">2</span>});<br></code></pre>

<blockquote>
  <p>合计值没有比对功能</p>
</blockquote></div><div id="wmd-preview-section-21" class="wmd-preview-section preview-content">

<h4 id="平均值">平均值</h4>

</div><div id="wmd-preview-section-22" class="wmd-preview-section preview-content">

<h5 id="平均值统计">平均值统计</h5>

<p>调用anaLyz方法，注明anatype值为avg：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">$.fn.autoHeader.anaLyz({<br><span class="hljs-string">baseJson:</span>bodyjson,<br><span class="hljs-string">anatype:</span><span class="hljs-string">'avg'</span>,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">digit:</span><span class="hljs-number">2</span>});<br></code></pre>

</div><div id="wmd-preview-section-23" class="wmd-preview-section preview-content">

<h5 id="平均值比对">平均值比对</h5>

<p>可将页面上数据与平均值进行比较，比平均值大的会使用向上箭头，小的则是向下箭头。箭头css可以自定义。</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">var compare={<br><span class="hljs-string">'enable'</span>:<span class="hljs-literal">true</span>,<span class="hljs-comment">//比对开关，默认为关闭</span><br><span class="hljs-string">'followelmt'</span>:<span class="hljs-string">'span'</span>,<span class="hljs-comment">//跟在td数据后方的标签，默认为span</span><br><span class="hljs-string">'elmthtml'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//跟在td数据后方的标签的html</span><br><span class="hljs-string">'upclass'</span>:<span class="hljs-string">'moreThanSpan'</span>,<span class="hljs-comment">//比比对数值大的css</span><br><span class="hljs-string">'lowclass'</span>:<span class="hljs-string">'lessThanSpan'</span>,<span class="hljs-comment">//比比对数值小的css</span><br><span class="hljs-string">'eqclass'</span>:<span class="hljs-string">'equalToSpan'</span><span class="hljs-comment">//于比对数值相同的css</span><br>}<br><br>$.fn.autoHeader.anaLyz({<br>anaJson：anajson<br><span class="hljs-string">baseJson:</span>basejson,<br><span class="hljs-string">anatype:</span><span class="hljs-string">'avg'</span>,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">digit:</span><span class="hljs-number">2</span>,<br><span class="hljs-string">compare:</span>compare<br>});<br></code></pre>

<blockquote>
  <p>如果不需要自定义在后方的标签css，compare的入参只需需定义enable为true即可。 <br>
  如果不配置baseJson，则默认以anaJson为基准进行比较。有两个json参数的应用场景是比对数据与基准数据有区别的情况：例页面上筛选只剩两条数据，而平均值比对则需要与之前加载来的十条数据的平均值进行比对。 <br>
  其他比对功能入参情况与此相同，不再赘述。</p>
</blockquote>

</div><div id="wmd-preview-section-24" class="wmd-preview-section preview-content">

<h4 id="最大值">最大值</h4>

</div><div id="wmd-preview-section-25" class="wmd-preview-section preview-content">

<h5 id="最大值统计">最大值统计</h5>

<p>调用anaLyz方法，注明anatype值为max：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">$.fn.autoHeader.anaLyz({<br><span class="hljs-string">baseJson:</span>bodyjson,<br><span class="hljs-string">anatype:</span><span class="hljs-string">'max'</span>,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">digit:</span><span class="hljs-number">2</span>});<br></code></pre>

</div><div id="wmd-preview-section-26" class="wmd-preview-section preview-content">

<h5 id="最大值比对">最大值比对</h5>

<p>可将页面上数据与最大值进行比较，与最大值持平的使用右向箭头。箭头css可以自定义。</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">var compare={<br><span class="hljs-string">'enable'</span>:<span class="hljs-literal">true</span><span class="hljs-comment">//比对开关，默认为关闭</span><br>}<br><br>$.fn.autoHeader.anaLyz({<br>anaJson：anajson<br><span class="hljs-string">baseJson:</span>basejson,<br><span class="hljs-string">anatype:</span><span class="hljs-string">'max'</span>,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">digit:</span><span class="hljs-number">2</span>,<br><span class="hljs-string">compare:</span>compare<br>});<br></code></pre>

</div><div id="wmd-preview-section-27" class="wmd-preview-section preview-content">

<h4 id="最小值">最小值</h4>

</div><div id="wmd-preview-section-28" class="wmd-preview-section preview-content">

<h5 id="最小值统计">最小值统计</h5>

<p>调用anaLyz方法，注明anatype值为min：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">$.fn.autoHeader.anaLyz({<br><span class="hljs-string">baseJson:</span>bodyjson,<br><span class="hljs-string">anatype:</span><span class="hljs-string">'min'</span>,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">digit:</span><span class="hljs-number">2</span>});<br></code></pre>

</div><div id="wmd-preview-section-3837" class="wmd-preview-section preview-content">

<h5 id="最小值比对">最小值比对</h5>

<p>可将页面上数据与最小值进行比较，与最小值持平的使用右向箭头。箭头css可以自定义。</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">var compare={<br><span class="hljs-string">'enable'</span>:<span class="hljs-literal">true</span><span class="hljs-comment">//比对开关，默认为关闭</span><br>}<br><br>$.fn.autoHeader.anaLyz({<br>anaJson：anajson<br><span class="hljs-string">baseJson:</span>basejson,<br><span class="hljs-string">anatype:</span><span class="hljs-string">'min'</span>,<br><span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>,<br><span class="hljs-string">digit:</span><span class="hljs-number">2</span>,<br><span class="hljs-string">compare:</span>compare<br>});<br></code></pre>

<hr>

</div><div id="wmd-preview-section-20330" class="wmd-preview-section preview-content">

<h4 id="4-排序功能">4. 排序功能</h4>

<p>排序功能集成了<code>tablesorter</code>插件，只需在表格初始化时在对应的配置中进行设置即可。</p>

<pre class="prettyprint hljs-dark"><code class="hljs elixir"><span class="hljs-variable">$.</span><span class="hljs-keyword">fn</span>.autoHeader.init({<br>        <span class="hljs-symbol">laynum:</span><span class="hljs-number">5</span>,<br>        <span class="hljs-symbol">headJson:</span>headstr,<br>        <span class="hljs-symbol">dataJson:</span>bodystr,<br>        <span class="hljs-symbol">tableid:</span><span class="hljs-string">'tabled'</span>,<br>        <span class="hljs-symbol">needsort:</span><span class="hljs-keyword">true</span>,<br>        <span class="hljs-symbol">columConfig:</span>{<br>            <span class="hljs-symbol">level:</span><span class="hljs-string">'lvl'</span>,<br>            <span class="hljs-symbol">showname:</span><span class="hljs-string">'viewname'</span><br>        },<br>        <span class="hljs-symbol">cssConfig:</span>{<br>            <span class="hljs-symbol">table:</span><span class="hljs-string">' table-hover  table-striped table-bordered table-responsive'</span>,<br>            <span class="hljs-symbol">tr:</span><span class="hljs-string">''</span><br>        },<br>        <span class="hljs-symbol">sort:</span>{<br>            <span class="hljs-symbol">enable:</span><span class="hljs-keyword">true</span>,<br>            <span class="hljs-symbol">rank:</span><span class="hljs-number">1</span>,<br>            <span class="hljs-symbol">theme:</span><span class="hljs-string">"bootstrap"</span>,<br>            <span class="hljs-symbol">debug:</span><span class="hljs-number">0</span>,<br>        }<br>    });<br></code></pre>

<p>其中，<code>sort</code>参数便是排序的设置参数，具体配置作用可查看最下方的参数说明。</p>

<blockquote>
  <p>排序插件在初始化时略消耗资源</p>
</blockquote>

<hr></div><div id="wmd-preview-section-20227" class="wmd-preview-section preview-content">

<h4 id="5-行序列号功能">5. 行序列号功能</h4>

<p>功能开启后，将会在对应列显示按照指定配置顺序进行排列的行序列号。 <br>
在使用init方法时，配置<code>serial</code>参数即可对行序列号功能进行配置。</p>

<pre class="prettyprint hljs-dark"><code class="hljs actionscript">serial={<br><span class="hljs-string">'enable'</span>:<span class="hljs-literal">true</span>, <span class="hljs-comment">//是否开启</span><br><span class="hljs-string">'type'</span>:<span class="hljs-string">'inverse'</span>, <span class="hljs-comment">//序号排序方式 nochange排序后不变 inverse跟随排序方式进行上下倒转排序</span><br><span class="hljs-string">'inverseOrder'</span>:<span class="hljs-string">'asc'</span>,<span class="hljs-comment">//如果排序方式是inverse，就需要指定倒转的排序类型，asc或者desc</span><br><span class="hljs-string">'order'</span>:<span class="hljs-string">'asc'</span>, <span class="hljs-comment">//默认顺序 从大往小desc，或者从小往大asc</span><br><span class="hljs-string">'serialColumnName'</span>:<span class="hljs-string">'排名'</span>,<span class="hljs-comment">//序列号列名</span><br><span class="hljs-string">'serialColumnIndex'</span>:<span class="hljs-number">0</span>  <span class="hljs-comment">//序列号列位置</span><br>}<br></code></pre>

<p>序列号在排序时可保持不变，或者跟随行数据而动。</p>

<hr></div><div id="wmd-preview-section-12185" class="wmd-preview-section preview-content">

<h4 id="6-预设值比对功能">6. 预设值比对功能</h4>

<p>该功能可以根据表头预设的比对公式，对数据进行比对计算，将计算后的结果以色块覆盖的形式进行展示，并且也可同时进行统计分析。</p>

</div><div id="wmd-preview-section-13636" class="wmd-preview-section preview-content">

<h5 id="比对数值对象">比对数值对象</h5>

<p>目前比对的数值对象支持绝对数值（如100）和其他列（插件将会动态获取同一行中对应列的数值）</p></div><div id="wmd-preview-section-14337" class="wmd-preview-section preview-content">

<h5 id="比对公式">比对公式</h5>

<p>比对公式目前支持基础运算符和数学表达式，一个公式的条件只能是一个表达式，一个表头可以有多个公式。</p>

</div><div id="wmd-preview-section-20179" class="wmd-preview-section preview-content">

<h5 id="比对公式的默认配置">比对公式的默认配置</h5>

<p>公式默认使用英文分号（;）作为分隔符，使用英文逗号（,）作为单个公式里条件和结果的分隔符，使用英文井号（#）作为字段指代标识符（该符号后的连续字符串会被认作为表头对应列名），使用{this}作为本体指代标识符，用于指代本表头列。 <br>
这些配置可以通过修改<code>transcp</code>参数下的<code>listDivide、conditionDivide、columnReference、selfReference</code>进行自定义。</p></div><div id="wmd-preview-section-23617" class="wmd-preview-section preview-content">

<h5 id="比对公式示例">比对公式示例</h5>

<ul><li>值小于100则为红色：<code>&lt;100,red</code></li>
<li>值小于col列则为红色：<code>&lt;#col,red</code></li>
<li>值超过col列的一半则为红色：<code>&gt;#col*0.5,red</code></li>
<li>值介于90和100之间则为红色：<code>90&lt;{this}&lt;100,red</code></li>
<li>值介于90和100之间则为红色，小于90为黄色：<code>90&lt;{this}&lt;100,red;&lt;90,yellow</code></li>
</ul>

</div><div id="wmd-preview-section-25742" class="wmd-preview-section preview-content">

<h5 id="比对的使用">比对的使用</h5>

<p>使用<code>transCompare</code>方法即可开启：</p>

<pre class="prettyprint hljs-dark"><code class="hljs groovy">$.fn.autoHeader.transCompare({<span class="hljs-string">anaJson:</span>currentJson,<span class="hljs-string">baseJson:</span>bodyjson,<span class="hljs-string">tableid:</span><span class="hljs-string">'tabled'</span>});<br></code></pre>

<p>必须指定的参数为：</p>

<ul><li><code>anaJson</code> 进行比对的数据</li>
<li><code>baseJson</code>被比对的基础数据，如果为空，则默认等于<code>anaJson</code></li>
<li><code>tableid</code>比对后数据的输出表格id</li>
</ul>

</div><div id="wmd-preview-section-28283" class="wmd-preview-section preview-content">

<h5 id="比对的描述配置">比对的描述配置</h5>

<p>修改<code>transcp</code>参数下的<code>titleConfig</code>和<code>clzConfig</code>可以进行比对统计标题和对应css的配置：</p>

<pre class="prettyprint hljs-dark"><code class="hljs actionscript"><span class="hljs-string">'titleConfig'</span>:{<span class="hljs-string">'red'</span>:<span class="hljs-string">'不合格'</span>,<span class="hljs-string">'yellow'</span>:<span class="hljs-string">'警告'</span>}, <span class="hljs-comment">//比对统计标题的配置，将会根据此配置显示统计的标题，如果没有设置，将会默认使用表头配置里的字符作为标题（如red）</span><br><span class="hljs-string">'clzConfig'</span>:{<span class="hljs-string">'red'</span>:<span class="hljs-string">'lever2'</span>,<span class="hljs-string">'yellow'</span>:<span class="hljs-string">'lever1'</span>},  <span class="hljs-comment">//比对css的配置，即不同的比对结果，td显示不同的css（背景色等设置）</span><br></code></pre>

<blockquote>
  <p>插件设置的默认值为不合格和警告，如需自定义，只需修改参数即可。</p>
</blockquote>

</div><div id="wmd-preview-section-32079" class="wmd-preview-section preview-content">

<h5 id="比对的统计">比对的统计</h5>

<p>该功能可以根据行维度统计每行数据符合比对公式的总计数量，如第一行数据总共有多少不合格，多少警告。 <br>
如果开启数据明细筛选，将会根据触发机制，在总表的每个单元格绑定事件，进行有问题数据列的筛选。（如点击某结果的不合格项，明细表只显示该结果的不合格列和数据） <br>
该功能通过配置<code>transCountCp</code>参数进行开启和配置（在使用<code>transCompare</code>方法时）。</p>

<pre class="prettyprint hljs-dark"><code class="hljs actionscript">transCountCp ={<br><span class="hljs-string">'enable'</span>:<span class="hljs-literal">true</span>, <span class="hljs-comment">//统计表格是否开启，默认为true</span><br><span class="hljs-string">'tgtTableId'</span>:<span class="hljs-string">'tabledcnt'</span>, <span class="hljs-comment">//展示统计表格数据的容器id</span><br><span class="hljs-string">'table'</span>:<span class="hljs-string">' table-hover  table-striped table-bordered table-responsive'</span>,<span class="hljs-comment">//表格的css</span><br><span class="hljs-string">'caption'</span>:<span class="hljs-string">'分析统计结果'</span>, <span class="hljs-comment">//表格标题</span><br><span class="hljs-string">'captionstyle'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//标题格式css</span><br><span class="hljs-string">'title'</span>:<span class="hljs-string">'类型/单位'</span>, <span class="hljs-comment">//统计表格的标头，显示在表格左上角区域</span><br><span class="hljs-string">'rowcol'</span>:<span class="hljs-string">'rep_org_name'</span>, <span class="hljs-comment">//数据行单位的标示字段名，标明该行数据归属的说明，将会横向成为统计表格的表头</span><br><span class="hljs-string">'switchenable'</span>:<span class="hljs-literal">true</span>,<span class="hljs-comment">//统计表格数据关联明细表数据筛选功能是否开启。</span><br><span class="hljs-comment">// 如果开启，将会根据触发机制，在总表的每个单元格绑定事件，进行有问题数据列的筛选。（如点击某结果的不合格项，明细表只显示该结果的不合格列和数据）</span><br><span class="hljs-string">'switchevent'</span>:<span class="hljs-string">'click'</span><span class="hljs-comment">//触发事件，默认为单击</span><br>}<br></code></pre></div><div id="wmd-preview-section-30" class="wmd-preview-section preview-content">

<h4 id="通用功能">通用功能</h4>

</div><div id="wmd-preview-section-31" class="wmd-preview-section preview-content">

<h5 id="表格的css配置">表格的css配置</h5>

<p>插件提供了一个二级入参cssConfig，如果在调用init方法的时候指定了这个参数，那么在比对的时候也必须指定这个参数，值同init方法时的入参。</p>

<blockquote>
  <p>比对时会重写表格数据，所以如果定义过了cssConfig，这里就需要也传入一次。</p>
</blockquote>

</div><div id="wmd-preview-section-32" class="wmd-preview-section preview-content">

<h5 id="比对标签css配置">比对标签css配置</h5>

<p>插件亦提供了比对标签的css自定义功能，使用二级入参compare的相关参数即可进行修改。</p>

<pre class="prettyprint hljs-dark"><code class="hljs elixir">compare={<br><span class="hljs-string">'followelmt'</span><span class="hljs-symbol">:<span class="hljs-string">'span'</span></span>,<span class="hljs-regexp">//</span>跟在td数据后方的标签，默认为span<br><span class="hljs-string">'elmthtml'</span><span class="hljs-symbol">:<span class="hljs-string">''</span></span>,<span class="hljs-regexp">//</span>跟在td数据后方的标签的html<br><span class="hljs-string">'upclass'</span><span class="hljs-symbol">:<span class="hljs-string">'moreThanSpan'</span></span>,<span class="hljs-regexp">//</span>比比对数值大的css<br><span class="hljs-string">'lowclass'</span><span class="hljs-symbol">:<span class="hljs-string">'lessThanSpan'</span></span>,<span class="hljs-regexp">//</span>比比对数值小的css<br><span class="hljs-string">'eqclass'</span><span class="hljs-symbol">:<span class="hljs-string">'equalToSpan'</span>//</span>于比对数值相同的css<br>}<br></code></pre>

<blockquote>
  <p>比对之后的td默认内容为 <br>
  <code>&lt;td&gt;value&lt;span class="moreThanSpan"&gt;&lt;/span&gt;&lt;/td&gt;</code></p>
</blockquote>

</div><div id="wmd-preview-section-33" class="wmd-preview-section preview-content">

<h5 id="返回类型配置">返回类型配置</h5>

<p>以一级参数returntype指定，默认为this，即返回插件本身，可供链式调用。可选参数为list，这种情况下插件会根据anatype类型，返回对应的比对结果的一维数组。</p>

</div><div id="wmd-preview-section-34" class="wmd-preview-section preview-content">

<h5 id="小数保留位数配置">小数保留位数配置</h5>

<p>以一级参数digit指定，默认为0，多用于平均值。</p>

</div><div id="wmd-preview-section-35" class="wmd-preview-section preview-content">

<h5 id="自定义抬头描述配置功能">自定义抬头描述配置功能</h5>

<p>以descenable等相关参数指定：  </p>

<pre class="prettyprint hljs-dark"><code class="hljs actionscript"><span class="hljs-string">'descenable'</span>:<span class="hljs-literal">true</span>,<span class="hljs-comment">//抬头描述开关，默认开启</span><br><span class="hljs-string">'descstr'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//生成的比对数据的抬头，例合计值 平均值 最大值 等，可自定义输入</span><br><span class="hljs-string">'desccol'</span>:<span class="hljs-number">0</span> ,<span class="hljs-comment">//数据的抬头对应的列位置，默认为0，即第一列</span><br></code></pre>

</div><div id="wmd-preview-section-36" class="wmd-preview-section preview-content">

<h5 id="书写位置的配置">书写位置的配置</h5>

<p>以writepos参数指定，默认为after，在所有数据之后添加。可选参数before，在所有数据之前添加。</p>

</div><div id="wmd-preview-section-37" class="wmd-preview-section preview-content">

<h5 id="统计值css自定义功能">统计值css自定义功能</h5>

<p>插件提供了统计值行的css自定义功能，应用场景：统计值行需要与数据行的格式有区别。配置下列参数即可：</p>

<pre class="prettyprint hljs-dark"><code class="hljs ruby"><span class="hljs-symbol">trclass:</span><span class="hljs-string">''</span>,<span class="hljs-regexp">//</span>生成的tr的<span class="hljs-class"><span class="hljs-keyword">class</span></span><br><span class="hljs-symbol">tdclass:</span><span class="hljs-string">''</span>,<span class="hljs-regexp">//</span>生成的td的<span class="hljs-class"><span class="hljs-keyword">class</span>  </span><br></code></pre>

</div><div id="wmd-preview-section-38" class="wmd-preview-section preview-content">

<h2 id="参数说明">参数说明</h2>

<p>这段内容列举了插件的可用参数定义以及默认值</p>

</div><div id="wmd-preview-section-10500" class="wmd-preview-section preview-content">

<h3 id="书写部分">书写部分</h3>

<pre class="prettyprint hljs-dark"><code class="hljs gradle"><span class="hljs-comment">//列配置参数</span><br>colConfig = {<br>    <span class="hljs-string">'treecode'</span>: <span class="hljs-string">'treeCode'</span>, <span class="hljs-comment">//表头树形编码</span><br>    <span class="hljs-string">'level'</span>: <span class="hljs-string">'level'</span>,<span class="hljs-comment">//表头节点的层级</span><br>    <span class="hljs-string">'isleaf'</span>: <span class="hljs-string">'isleaf'</span>,<span class="hljs-comment">//是否为叶子节点</span><br>    <span class="hljs-string">'showname'</span>: <span class="hljs-string">'name'</span>,<span class="hljs-comment">//表头节点名称</span><br>    <span class="hljs-string">'desc'</span>: <span class="hljs-string">'headDesc'</span>,<span class="hljs-comment">//表头描述</span><br>    <span class="hljs-string">'datacolumn'</span>:<span class="hljs-string">'reportColumnName'</span>,<span class="hljs-comment">//对应数据json的属性名</span><br>    <span class="hljs-string">'thstyle'</span>: <span class="hljs-string">'cssstyle'</span><span class="hljs-comment">//表头自定义css样式</span><br>}<br><br><span class="hljs-comment">//表头描述配置</span><br>descConfig = {<br>    <span class="hljs-string">'enable'</span>:<span class="hljs-keyword">false</span>,<span class="hljs-comment">//开启状态：默认为关闭</span><br>    <span class="hljs-string">'desc_type'</span>:<span class="hljs-string">'div'</span>,<span class="hljs-comment">//显示方式：可选方式有div、title。div在div处显示，title则会在th内容外包一层span，span的title置为描述值。</span><br>    <span class="hljs-string">'d_target_id'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//描述信息展示的容器：默认为空，即插件自动生成描述div。如指定描述的容器id，会将信息放入描述容器中.</span><br>    <span class="hljs-comment">//插件默认的容器，为里外两个div，可重新指定里外div的css格式</span><br>    <span class="hljs-string">'css_out'</span>: <span class="hljs-string">'descdivdefault_out'</span>,<span class="hljs-comment">//外侧div的css</span><br>    <span class="hljs-string">'css_in'</span>: <span class="hljs-string">'descdivdefault_in'</span>,<span class="hljs-comment">//里侧div的css</span><br>    <span class="hljs-string">'css_title'</span>: <span class="hljs-string">'ttitle'</span>,<span class="hljs-comment">//描述的标题css</span><br>    <span class="hljs-string">'css_content'</span>: <span class="hljs-string">'content'</span>,<span class="hljs-comment">//描述的内容css</span><br>    <span class="hljs-string">'css_close'</span>: <span class="hljs-string">'close'</span>,<span class="hljs-comment">//关闭按钮的css</span><br>    <span class="hljs-string">'showevent'</span>:<span class="hljs-string">'click'</span>,<span class="hljs-comment">//弹出描述的事件</span><br>    <span class="hljs-string">'hideevent'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//关闭描述的事件</span><br>    <span class="hljs-string">'position'</span>:<span class="hljs-string">'fly'</span>,<span class="hljs-comment">//div显示位置 有absolute和fly两种状态 absolute：div的位置是绝对值，以x和y作为起点。fly：div的位置以鼠标作为起点，x和y为偏移量</span><br>    <span class="hljs-string">'pos_x'</span>:<span class="hljs-number">10</span>,<span class="hljs-comment">//x位置</span><br>    <span class="hljs-string">'pos_y'</span>:<span class="hljs-number">10</span>,<span class="hljs-comment">//y位置</span><br>    <span class="hljs-string">'desc_th_class'</span>:<span class="hljs-string">''</span> <span class="hljs-comment">//包含描述的表头th的class，如果有值，表头内容包含描述时，class属性将会由这个值覆盖。仅显示方式为div时有效</span><br>}<br><br><span class="hljs-comment">//自定义格式配置</span><br>cssConfig = {<br>    <span class="hljs-string">'table'</span>: <span class="hljs-string">''</span>,<br>    <span class="hljs-string">'caption'</span>:<span class="hljs-string">''</span>,<br>    <span class="hljs-string">'tr'</span>: <span class="hljs-string">''</span>,<br>    <span class="hljs-string">'th'</span>: <span class="hljs-string">''</span>,<br>    <span class="hljs-string">'datatr'</span>:<span class="hljs-string">''</span>,<br>    <span class="hljs-string">'td'</span>: <span class="hljs-string">''</span><br>}<br><span class="hljs-comment">//表格排序设置 使用tablesort插件 会影响加载速度，不需要的情况下关闭即可 add by v1.1</span><br><span class="hljs-comment">//配置同tablesort插件的配置</span><br><span class="hljs-keyword">sort</span>={<br>    <span class="hljs-string">'enable'</span>:<span class="hljs-keyword">false</span>, <span class="hljs-comment">//是否开启</span><br>    <span class="hljs-string">'headerTemplate'</span> : <span class="hljs-string">'{content} {icon}'</span>,<br>    <span class="hljs-string">'rank'</span>:<span class="hljs-keyword">false</span>, <span class="hljs-comment">//当前实时排名是否开启</span><br>    <span class="hljs-string">'widgets'</span> : [ <span class="hljs-string">"uitheme"</span>], <span class="hljs-comment">//外观主题</span><br>    <span class="hljs-string">'sortInitialOrder'</span>: <span class="hljs-string">'desc'</span>,<span class="hljs-comment">//初始排序顺序</span><br>    <span class="hljs-string">'rankdesc'</span>:<span class="hljs-string">'当前排名:'</span> <span class="hljs-comment">//排名描述</span><br>},<br><br><span class="hljs-comment">//行序列号功能 V1.1</span><br>serial={<br>    <span class="hljs-string">'enable'</span>:<span class="hljs-keyword">true</span>, <span class="hljs-comment">//是否开启</span><br>    <span class="hljs-string">'type'</span>:<span class="hljs-string">'inverse'</span>, <span class="hljs-comment">//序号排序方式 nochange排序后不变 inverse跟随排序方式进行上下倒转排序</span><br>    <span class="hljs-string">'inverseOrder'</span>:<span class="hljs-string">'asc'</span>,<span class="hljs-comment">//如果排序方式是inverse，就需要指定倒转的排序类型，asc或者desc</span><br>    <span class="hljs-string">'order'</span>:<span class="hljs-string">'asc'</span>, <span class="hljs-comment">//默认顺序 从大往小desc，或者从小往大asc</span><br>    <span class="hljs-string">'serialColumnName'</span>:<span class="hljs-string">'排名'</span>,<span class="hljs-comment">//序列号列名</span><br>    <span class="hljs-string">'serialColumnIndex'</span>:<span class="hljs-number">0</span>  <span class="hljs-comment">//序列号列位置</span><br>},<br><br><span class="hljs-comment">//一级参数，默认配置</span><br>defaults = {<br>    <span class="hljs-string">'laynum'</span>: <span class="hljs-number">1</span>, <span class="hljs-comment">//层数 必填</span><br>    <span class="hljs-string">'startlay'</span>:<span class="hljs-number">1</span>,<span class="hljs-comment">//从哪层开始 默认为1 即lvl=1的数据开始</span><br>    <span class="hljs-string">'headJson'</span>: <span class="hljs-keyword">null</span>,<span class="hljs-comment">//表头数据 必填</span><br>    <span class="hljs-string">'dataJson'</span>: <span class="hljs-keyword">null</span>,<span class="hljs-comment">//内容数据 必填</span><br>    <span class="hljs-string">'caption'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//表格名称</span><br>    <span class="hljs-string">'debug'</span>:<span class="hljs-keyword">false</span>,<span class="hljs-comment">//debug模式 会输出数据生成等信息值</span><br>    <span class="hljs-string">'outspanid'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//debug输出模式下输出信息的span id 信息会书写到这个span下。</span><br>    <span class="hljs-string">'datamulti'</span>:<span class="hljs-number">0</span>,<span class="hljs-comment">//测试书写性能的数据，如果开启了debug模式，数据包将会进行翻倍书写，倍数为此值</span><br>    <span class="hljs-string">'tableid'</span>: <span class="hljs-string">'tableid'</span>,<span class="hljs-comment">//表格识别符</span><br>    <span class="hljs-string">'needsort'</span>:<span class="hljs-keyword">false</span>,<span class="hljs-comment">//是否需要排序，默认为false，排序的话会增加时间消耗</span><br>    <span class="hljs-string">'thstyle'</span>:<span class="hljs-keyword">false</span>,<span class="hljs-comment">//th表头的附带css是否需要激活，默认为false</span><br>    <span class="hljs-string">'descConfig'</span>: <span class="hljs-keyword">this</span>.descConfig,<span class="hljs-comment">//描述框配置</span><br>    <span class="hljs-string">'colConfig'</span>: <span class="hljs-keyword">this</span>.columConfig, <span class="hljs-comment">//列名配置，根据配置的列名读取json里的属性字段进行一一对应</span><br>    <span class="hljs-string">'cssConfig'</span>: <span class="hljs-keyword">this</span>.cssConfig <span class="hljs-comment">//css自定义配置，若不指定，则使用默认的配置</span><br>}<br></code></pre></div><div id="wmd-preview-section-32145" class="wmd-preview-section preview-content">

<h3 id="统计分析部分">统计分析部分</h3>

<pre class="prettyprint hljs-dark"><code class="hljs actionscript"><span class="hljs-comment">//css配置，进行值比对时所用，如果在init时候指定了cssConfig入参，此处的配置应当同init时的配置</span><br>cssConfig = {<br>    <span class="hljs-string">'tr'</span>: <span class="hljs-string">''</span>,<br>    <span class="hljs-string">'th'</span>: <span class="hljs-string">''</span>,<br>    <span class="hljs-string">'datatr'</span>:<span class="hljs-string">''</span>,<br>    <span class="hljs-string">'td'</span>: <span class="hljs-string">''</span><br>    }<br><br><span class="hljs-comment">//比对的配置</span><br>compare={<br>    <span class="hljs-string">'enable'</span>:<span class="hljs-literal">false</span>,<span class="hljs-comment">//比对开关，默认为关闭</span><br>    <span class="hljs-string">'followelmt'</span>:<span class="hljs-string">'span'</span>,<span class="hljs-comment">//跟在td数据后方的标签，默认为span</span><br>    <span class="hljs-string">'elmthtml'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//跟在td数据后方的标签的html</span><br>    <span class="hljs-string">'upclass'</span>:<span class="hljs-string">'moreThanSpan'</span>,<span class="hljs-comment">//比比对数值大的css</span><br>    <span class="hljs-string">'lowclass'</span>:<span class="hljs-string">'lessThanSpan'</span>,<span class="hljs-comment">//比比对数值小的css</span><br>    <span class="hljs-string">'eqclass'</span>:<span class="hljs-string">'equalToSpan'</span><span class="hljs-comment">//于比对数值相同的css</span><br>    }<br><br><span class="hljs-comment">//默认配置</span><br><span class="hljs-keyword">default</span> = {<br>    <span class="hljs-string">'anaJson'</span>:<span class="hljs-literal">null</span>,<span class="hljs-comment">//需要进行比较分析的内容数据</span><br>    <span class="hljs-string">'baseJson'</span>: <span class="hljs-literal">null</span>,<span class="hljs-comment">//进行比较分析的基准数据，如果为空，则默认等于anaJson，如果有指定，则按指定值来。（用于在进行比价分析时，内容数据不等于基准数据的场景，如内容只显示两条数据，但是需要比对所有十条数据的平均值）</span><br>    <span class="hljs-string">'tableid'</span>: <span class="hljs-string">'tableid'</span>,<span class="hljs-comment">//表格id 同init方法时的表格id</span><br>    <span class="hljs-string">'anatype'</span>:<span class="hljs-string">''</span>, <span class="hljs-comment">//分析类型 ，平均值avg 最大值max 最小值min 合计值all 等</span><br>    <span class="hljs-string">'returntype'</span>:<span class="hljs-string">'this'</span>,<span class="hljs-comment">//返回类型，可返回list：数据比对的结果list，默认为返回this字符，在插件入口处进行判断，是否返回插件自身</span><br>    <span class="hljs-string">'digit'</span>:<span class="hljs-number">0</span> ,<span class="hljs-comment">//小数保留位数，默认为0</span><br>    <span class="hljs-string">'descenable'</span>:<span class="hljs-literal">true</span>,<span class="hljs-comment">//抬头描述开关，默认开启</span><br>    <span class="hljs-string">'descstr'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//生成的比对数据的抬头，例如 合计值 平均值 最大值 等，可以被用户自定义</span><br>    <span class="hljs-string">'desccol'</span>:<span class="hljs-number">0</span> ,<span class="hljs-comment">//数据的抬头对应的列位置，默认为0，即第一列</span><br>    <span class="hljs-string">'writetotable'</span>:<span class="hljs-literal">true</span>,<span class="hljs-comment">//是否需要写到表格中去，默认开启</span><br>    <span class="hljs-string">'writepos'</span>:<span class="hljs-string">'after'</span>, <span class="hljs-comment">//写到表格中对于table tbody的位置，默认为after，可选参数before，为所有数据之前</span><br>    <span class="hljs-string">'trclass'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//生成的tr的class</span><br>    <span class="hljs-string">'tdclass'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//生成的td的class</span><br>    <span class="hljs-string">'compare'</span>:<span class="hljs-keyword">this</span>.compare, <span class="hljs-comment">//比对的配置</span><br>    <span class="hljs-string">'cssConfig'</span>:<span class="hljs-keyword">this</span>.cssConfig <span class="hljs-comment">//css配置</span><br>    }<br><span class="hljs-comment">//预设值比对的配置，V1.1版本新增</span><br>transcp={<br>    <span class="hljs-string">'titleConfig'</span>:{<span class="hljs-string">'red'</span>:<span class="hljs-string">'不合格'</span>,<span class="hljs-string">'yellow'</span>:<span class="hljs-string">'警告'</span>}, <span class="hljs-comment">//比对统计标题的配置，将会根据此配置显示统计的标题，如果没有设置，将会默认使用表头配置里的字符作为标题（如red）</span><br>    <span class="hljs-string">'clzConfig'</span>:{<span class="hljs-string">'red'</span>:<span class="hljs-string">'lever2'</span>,<span class="hljs-string">'yellow'</span>:<span class="hljs-string">'lever1'</span>},  <span class="hljs-comment">//比对css的配置，即不同的比对结果，td显示不同的css（背景色等设置）</span><br>    <span class="hljs-string">'listDivide'</span>:<span class="hljs-string">';'</span>, <span class="hljs-comment">//比对条件的列表分隔符，插件会按照该分隔符将比对字符串分割成几个不同的结果列表，类似 大于10,红色;小于10,黄色</span><br>    <span class="hljs-string">'conditionDivide'</span>:<span class="hljs-string">','</span>, <span class="hljs-comment">//单条比对数据的条件和结果分隔符，前方为条件，后方为结果 ，类似 大于10,红色</span><br>    <span class="hljs-string">'columnReference'</span>:<span class="hljs-string">'#'</span>, <span class="hljs-comment">//字段指代标识符，该符号标识的内容，将会通过通过之后跟随的字段名去获取对应数值进行比对</span><br>    <span class="hljs-string">'selfReference'</span>:<span class="hljs-string">'{this}'</span>, <span class="hljs-comment">//本体指代标识符，不可与其他字段名重复，将会使用本体值替换该内容进行比较 目前支持a&gt;this&gt;b a&lt;this&lt;b格式</span><br>    <span class="hljs-string">'count'</span>:<span class="hljs-literal">true</span>, <span class="hljs-comment">//是否开启总数统计，默认为false</span><br>    <span class="hljs-string">'d_target_id'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//描述信息展示的容器：默认为空，即插件自动生成描述div。如指定描述的容器id，会将信息放入描述容器中.</span><br>    <span class="hljs-string">'css_out'</span>: <span class="hljs-string">'descdivdefault_out'</span>,<span class="hljs-comment">//外侧div的css</span><br>    <span class="hljs-string">'css_in'</span>: <span class="hljs-string">'descdivdefault_in'</span>,<span class="hljs-comment">//里侧div的css</span><br>    <span class="hljs-string">'css_title'</span>: <span class="hljs-string">'ttitle'</span>,<span class="hljs-comment">//描述的标题css</span><br>    <span class="hljs-string">'css_content'</span>: <span class="hljs-string">'content'</span>,<span class="hljs-comment">//描述的内容css</span><br>    <span class="hljs-string">'css_close'</span>: <span class="hljs-string">'close'</span>,<span class="hljs-comment">//关闭按钮的css</span><br>    <span class="hljs-string">'showevent'</span>:<span class="hljs-string">'click'</span>,<span class="hljs-comment">//弹出描述的事件</span><br>    <span class="hljs-string">'hideevent'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//关闭描述的事件</span><br>    <span class="hljs-string">'position'</span>:<span class="hljs-string">'fly'</span>,<span class="hljs-comment">//div显示位置 有absolute和fly两种状态 absolute：div的位置是绝对值，以x和y作为起点。fly：div的位置以鼠标作为起点，x和y为偏移量</span><br>    <span class="hljs-string">'pos_x'</span>:-<span class="hljs-number">100</span>,<span class="hljs-comment">//x位置</span><br>    <span class="hljs-string">'pos_y'</span>:<span class="hljs-number">0</span>,<span class="hljs-comment">//y位置</span><br><br>},<br><span class="hljs-comment">//预设值比对的统计表格设置，V1.1版本新增</span><br>transCountCp ={<br>    <span class="hljs-string">'enable'</span>:<span class="hljs-literal">true</span>, <span class="hljs-comment">//统计表格是否开启，默认为true</span><br>    <span class="hljs-string">'tgtTableId'</span>:<span class="hljs-string">'tabledcnt'</span>, <span class="hljs-comment">//展示统计表格数据的容器id</span><br>    <span class="hljs-string">'table'</span>:<span class="hljs-string">' table-hover  table-striped table-bordered table-responsive'</span>,<span class="hljs-comment">//表格css</span><br>    <span class="hljs-string">'caption'</span>:<span class="hljs-string">'分析统计结果'</span>, <span class="hljs-comment">//表格标题</span><br>    <span class="hljs-string">'captionstyle'</span>:<span class="hljs-string">''</span>,<span class="hljs-comment">//标题格式css</span><br>    <span class="hljs-string">'title'</span>:<span class="hljs-string">'类型/单位'</span>, <span class="hljs-comment">//统计表格的标头，显示在表格左上角区域</span><br>    <span class="hljs-string">'rowcol'</span>:<span class="hljs-string">'rep_org_name'</span>, <span class="hljs-comment">//数据行单位的标示字段名，标明该行数据归属的说明，将会横向成为统计表格的表头</span><br>    <span class="hljs-string">'switchenable'</span>:<span class="hljs-literal">true</span>,<span class="hljs-comment">//统计表格数据关联明细表数据筛选功能是否开启。</span><br>    <span class="hljs-comment">// 如果开启，将会根据触发机制，在总表的每个单元格绑定事件，进行有问题数据列的筛选。（如点击某数据的警告项，明细表只显示该单位的警告列和数据）</span><br>    <span class="hljs-string">'switchevent'</span>:<span class="hljs-string">'click'</span><span class="hljs-comment">//数据筛选触发事件，默认为单击</span><br><br>},<br></code></pre></div><div id="wmd-preview-section-41" class="wmd-preview-section preview-content">

<h2 id="license">License</h2>

<p>与jquery相同 - MIT</p>

</div><div id="wmd-preview-section-42" class="wmd-preview-section preview-content">

<h2 id="更新日志">更新日志</h2>

</div><div id="wmd-preview-section-2906" class="wmd-preview-section preview-content">

<h3 id="v11">V1.1</h3>

<ul><li>排序功能</li>
<li>行序列号功能</li>
<li><p>预设值比对分析</p>

<p><em>2016-5-1</em></p></li>
</ul></div><div id="wmd-preview-section-44" class="wmd-preview-section preview-content">

<h3 id="v10">V1.0</h3>

<ul><li>表格生成功能</li>
<li>表头动态筛选</li>
<li><p>基础统计分析</p>

<p><em>2016-2-26</em></p></li>
</ul></div><div id="wmd-preview-section-3628" class="wmd-preview-section preview-content">

<h2 id="展望功能">展望功能</h2>

<ul><li>根据复杂表头生成输入框功能</li>
<li>过长表头的折叠功能</li>
</ul></div><div id="wmd-preview-section-footnotes" class="preview-content"></div></div></body></html>